<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      label-position="top"
      :rules="rules"
    >
      <el-form-item label="产品编号" prop="id">
        <el-col :span="8">
          <el-input v-model="form.id" />
        </el-col>
      </el-form-item>

      <el-form-item label="产品名称" prop="name">
        <el-col :span="8">
          <el-input v-model="form.name" />
        </el-col>
      </el-form-item>

      <el-form-item label="产品期限" prop="term">
        <el-select v-model="form.term" placeholder="选择产品期限">
          <el-option
            v-for="item in productTerm"
            :key="item"
            :label="item + '月'"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年利化率（%）" prop="annualProfitRate">
        <el-col :span="8">
          <el-input v-model="form.annualProfitRate" />
        </el-col>
      </el-form-item>

      <el-form-item label="起存金额（元）" prop="initialDepositAmount">
        <el-col :span="8">
          <el-input v-model="form.initialDepositAmount" />
        </el-col>
      </el-form-item>

      <el-form-item label="递增金额（元）" prop="incrementalAmount">
        <el-col :span="8">
          <el-input v-model="form.incrementalAmount" />
        </el-col>
      </el-form-item>

      <el-form-item label="单人限额（元）" prop="limitAmount">
        <el-col :span="8">
          <el-input v-model="form.limitAmount" />
        </el-col>
      </el-form-item>

      <el-form-item label="单日限额（元）" prop="dayLimitAmount">
        <el-col :span="8">
          <el-input v-model="form.dayLimitAmount" />
        </el-col>
      </el-form-item>

      <el-form-item label="风险等级" prop="riskLevel">
        <el-select v-model="form.riskLevel" placeholder="请选择产品风险等级">
          <el-option
            v-for="(item, index) in riskLevelList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="结息方式" prop="interestSettlementMethod">
        <el-col :span="8">
          <el-input v-model="form.interestSettlementMethod" />
        </el-col>
      </el-form-item>

      <el-form-item label="限制区域" prop="limitArea">
        <el-col :span="8">
          <el-input v-model="form.limitArea" />
        </el-col>
      </el-form-item>

      <el-form-item label="产品库存" prop="allowance">
        <el-col :span="8">
          <el-input v-model="form.allowance" />
        </el-col>
      </el-form-item>

      <el-form-item label="原子服务选择" prop="service">
        <el-select
          v-model="value"
          style="min-width: 800px"
          multiple
          clearable
          placeholder="请选择原子服务（1,10号服务默认为所有产品添加）"
          ref="select"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建产品</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addPro } from "@/api/product";
import { getAtomic } from "@/api/atomic";

export default {
  name: "addTabel",
  data() {
    return {
      form: {
        id: "", // 产品编号
        name: "", // 产品名称
        term: undefined, // 产品期限
        annualProfitRate: undefined, // 年利化率
        initialDepositAmount: undefined, // 起存金额
        incrementalAmount: undefined, // 递增金额
        limitAmount: undefined, // 单人限额
        dayLimitAmount: undefined, // 单日限额
        riskLevel: "", // 风险等级
        interestSettlementMethod: "", // 结息方式
        limitArea: "",
        allowance: undefined,
        service: "",
      },
      value: [],
      options: [],
      productTerm: [3, 6, 12, 24, 36, 48, 60, 120],
      riskLevelList: ["低风险", "中等风险", "高风险"],
      rules: {
        id: [
          { required: true, message: "请输入产品编号", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
        term: [
          { required: true, message: "请选择产品期限", trigger: "change" },
        ],
        annualProfitRate: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        initialDepositAmount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        incrementalAmount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        limitAmount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        dayLimitAmount: [
          { required: true, message: "请输入金额", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        riskLevel: [
          { required: true, message: "请选择风险等级", trigger: "change" },
        ],
        limitArea: [
          {
            required: true,
            message: "请输入限定区域",
            trigger: "change",
          },
        ],
        allowance: [
          { required: true, message: "请输入库存", trigger: "blur" },
          {
            validator(rule, value, callback) {
              if (Number.isFinite(value) && value >= 0) {
                callback();
              } else {
                callback(new Error("请输入不小于0的数字"));
              }
            },
            trigger: "blur",
            transform(value) {
              return Number(value);
            },
          },
        ],
        interestSettlementMethod: [
          { required: true, message: "请输入结息方式", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getAtomicList();
  },
  methods: {
    getAtomicList() {
      getAtomic().then((res) => {
        let tem = res.data.slice(1, res.data.length - 1);
        this.options = tem.map(this.copyProperties);
      });
    },
    copyProperties(o) {
      let option = {};
      option.value = o.id;
      option.label = o.name;
      return option;
    },
    onSubmit() {
      this.form.service = this.value.join(',');
      addPro(this.form).then((res) => {
        this.$message(res.msg);
      });
      this.$refs.form.resetFields();
    },
    onCancel() {
      this.$message({
        message: "cancel!",
        type: "warning",
      });
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

